<template>
  <div class="index">
    <div class="left">
      <h2>酒店管理系统</h2>
      <el-menu
          router
          active-text-color="#ffd04b"
          background-color="#142334"
          class="el-menu-vertical-demo"
          default-active="2"
          text-color="#fff">

        <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <User/>
            </el-icon>
            <span style="color:#fff;">账户管理</span>
          </template>
          <el-menu-item index="/index/role">角色管理</el-menu-item>
          <el-menu-item index="/index/user">用户管理</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="2">
          <template #title>
            <el-icon>
              <Grid/>
            </el-icon>
            <span style="color:#fff;">客房管理</span>
          </template>
          <el-menu-item index="/index/room">房间管理</el-menu-item>
          <el-menu-item index="/index/roomType">客房类型</el-menu-item>
        </el-sub-menu>


        <el-sub-menu index="3">
          <template #title>
            <el-icon>
              <UserFilled/>
            </el-icon>
            <span style="color:#fff;">客户管理</span>
          </template>
          <el-menu-item index="/index/liveIn">入住管理</el-menu-item>
          <el-menu-item index="/index/order">客户订单</el-menu-item>
        </el-sub-menu>


        <el-sub-menu index="4">
          <template #title>
            <el-icon>
              <Setting/>
            </el-icon>
            <span style="color:#fff;">系统管理</span>
          </template>
          <el-menu-item index="/index/menu">菜单管理</el-menu-item>
          <el-menu-item index="/index/dictionary">字典管理</el-menu-item>
        </el-sub-menu>


      </el-menu>
    </div>
    <div class="right">
      <div class="top">
        <el-menu
            router
            :ellipsis="false"
            mode="horizontal"
            background-color="#142334"
            text-color="#fff"
            active-text-color="#ffd04b">
          <el-menu-item index="/index">
            <el-icon>
              <HomeFilled/>
            </el-icon>
            首页
          </el-menu-item>
          <el-menu-item index="/index/mail">
            <el-icon>
              <Eleme/>
            </el-icon>
            邮件
          </el-menu-item>
          <el-menu-item index="/index/message">

            <el-icon>
              <MessageBox/>
            </el-icon>
            消息
          </el-menu-item>
          <el-sub-menu index="/index/admin">
            <template #title>
              <el-icon>
                <Management/>
              </el-icon>
              管理员
            </template>
            <el-menu-item index="/index/user">个人中心</el-menu-item>
            <el-menu-item index="/index/setPassword">修改密码</el-menu-item>
            <el-menu-item @click="exit">退出登录</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {Eleme, Grid, HomeFilled, Management, MessageBox, Setting, User, UserFilled} from '@element-plus/icons-vue'
import GlobalUser from '../store/user.ts'
import {onMounted} from 'vue'
import {useRouter} from 'vue-router'
import {ElMessageBox} from 'element-plus'

const router = useRouter()
const globalUser = GlobalUser();
onMounted(() => {
  if (!globalUser.user.userId) {
    router.push('/')
  }
})

function exit() {
  ElMessageBox.confirm('是否退出登录', '温馨提示', {
    confirmButtonText: '确定',
    type: 'warning',
    showCancelButton: false,
  }).then(() => {
    globalUser.clearUser()
    router.push('/')
  })
}

</script>
<style scoped lang="scss">
.index {
  width: 100vw;
  height: 100vh;
  display: flex;

  .left {
    width: 200px;
    background-color: #142334;
    color: white;

    .el-menu {
      border-right: none;
    }

    h2 {
      font-size: 18px;
      text-align: center;
      height: 60px;
      line-height: 60px;
    }
  }

  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .top {
    height: 60px;
    background-color: #142334;
    color: white;
    display: flex;
    justify-content: end;

    .el-menu {
      border-bottom: none;
    }
  }

  .content {
    flex: 1;
    padding: 5px;
  }
}
</style>